<template>
	<div>
		<!-- 布局 -->
		<el-container>
			<!-- 页面的head头部 -->
			<el-header>
				<el-link style="float: left; margin-left: 50px; font-size: 20px;" @click="toIndex" target="_blank">众筹网首页</el-link>
				<el-link style="float: right; margin-right: 50px; font-size: 20px;" v-show="user==''" @click="toLogin" target="_blank">请登录</el-link>
				<el-link style="float: right; margin-right: 50px; font-size: 20px;" v-show="user!=''" @click="toMember" target="_blank">个人中心</el-link>
			</el-header>
			<!-- 页面的主体部分 -->
			<el-main>
				<div class="main-div">
					<!-- main的头部信息 -->
					<el-tabs v-model="activeName" @tab-click="toChangeTab">
						<el-tab-pane label="众筹首页" name="first"></el-tab-pane>
						<el-tab-pane label="项目总览" name="second" value></el-tab-pane>
						<el-tab-pane label="发起项目" name="third"></el-tab-pane>
						<el-tab-pane label="我的众筹" name="fourth"></el-tab-pane>
					</el-tabs>
					<el-card class="box-card">
						<div style="margin-bottom: 15px;">
							<el-input placeholder="请输入项目名称或关键字" class="input-with-select" v-model="selectItem.itemIname"
								@clear="clearInp" clearable>
								<template slot="prepend">项目名称</template>
							</el-input>
							<el-button slot="append" type="primary" icon="el-icon-search" @click="selectItemByNSZ">查询
							</el-button>
						</div>
						<span>分类：</span>
						<el-checkbox v-for="cg in category" :label="cg.cid" v-model="selectItem.itemCid" @change="bhCh">
							{{cg.cname}}</el-checkbox>
						<br> <br>
						<span>状态：</span>
						<el-radio-group v-model="radio" @change="ztCh">
							<el-radio :label="''">全部</el-radio>
							<el-radio :label="0">即将开始</el-radio>
							<el-radio :label="1">众筹中</el-radio>
						</el-radio-group>

					</el-card>


					<el-row :gutter="20" style="margin-top: 40px">
						<el-col :span="6" v-for="i in itemList">
							<el-card shadow="hover" style="margin-bottom: 50px">
								<el-image :src="imgUrl+i.iimg" class="image"></el-image>
								<div style="padding: 14px;">
									<div style="margin: 10px">
										<el-link style="font-weight: bold; font-size: 16px"> {{i.iname}} </el-link>
									</div>
									<div>筹资金额：<time class="time">{{i.amoney}}</time> </div>
									<div>开始时间：
										<time class="time" v-show="i.istart != null">{{i.istart}}</time>
										<time class="time" v-show="i.istart == null">敬请期待</time>
									</div>
									<div>支持人数：<time class="time">{{i.haveman}}</time> </div>
									<br>
									<el-progress :text-inside="true" :stroke-width="20" :percentage="i.bfb">
									</el-progress>
									<el-button type="text" class="button">支持该项目</el-button>
								</div>
							</el-card>
						</el-col>
					</el-row>
					<!-- 分页 -->
					<center style="margin-top: 30px">
						<el-pagination background layout="prev, pager, next" :total="this.listTotal" :page-size="8"
							:current-page="pageNum" @current-change="pageNumChange">
						</el-pagination>
					</center>

				</div>
			</el-main>
			<!-- 页面的底部 -->
			<el-footer style="margin-top: 50px">
				<div id="foot-main">
					<div>
						<a rel="nofollow" href="#">关于我们</a> | <a rel="nofollow" href="#">服务条款</a> |
						<a rel="nofollow" href="#">免责声明</a> | <a rel="nofollow" href="#">网站地图</a> |
						<a rel="nofollow" href="#">联系我们</a>
					</div>
					<div>
						niuB_Plus.com 版权所有
					</div>
				</div>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				category: [],
				radio: "",
				selectItem: {
					itemIname: "",
					itemStatus: "",
					itemCid: []
				},
				imgUrl: "http://localhost:8888/crowdfunding_system_war_exploded/showImg?filename=",
				itemList: [],
				bfb: 0,
				pageNum: 1,
				listTotal: 0,
				activeName:'second',
				user:''
			}
		},
		methods: {
			async getUser() {
				// 获取user对象
				let id = window.sessionStorage.getItem("userid");
			
				let res = await this.$http.get("selectById?id=" + id);
				console.log(res.data.data)
				this.user = res.data.data;
			},
			async selectAllCategory() {
				let res = await this.$http.get("selectAllCategory");
				if (res.data.code == 200) {
					this.category = res.data.data;
				}
			},
			async ztCh() {
				this.pageNum = 1;
				await this.selectItemByNSZ();
			},
			async bhCh() {
				this.pageNum = 1;
				await this.selectItemByNSZ();
			},
			async clearInp() {
				this.pageNum = 1;
				await this.selectItemByNSZ();
			},
			async selectItemByNSZ() {
				let param = new URLSearchParams();
				param.append("status", this.radio);
				param.append("cid", this.selectItem.itemCid);
				param.append("iname", this.selectItem.itemIname);
				param.append("pageNum", this.pageNum);
				let res = await this.$http.post("selectItemByStatusAndCid", param);
				if (res.data.code == 200) {
					this.listTotal = res.data.data.total;
					this.itemList = res.data.data.list;
					console.log(res.data.data.list)
				} else {
					this.$message.error(res.data.message);
				}
			},
			pageNumChange(newPageNum) {
				
				this.pageNum = newPageNum;
				this.selectItemByNSZ();
			},
			toLogin() {
				this.$router.push('/login')
			},
			toMember() {
				this.$router.push('/member')
			},
			toIndex() {
				this.$router.push("/index")
			},
			toChangeTab(tab, event) {
				if(this.activeName != tab.name){
					this.activeName = tab.name;
					if(this.activeName==="first"){
						//应该是跳转到首页
						this.$router.push('/index')
					}
					if(this.activeName==="second"){
						//应该是跳转到项目总览页面
						this.$router.push('/member')
					}
					if(this.activeName==="third"){
						//应该是跳转到发起项目协议页面
						this.$router.push('/start')
					}
					if(this.activeName==="fourth"){
						//应该是跳转到个人中心页面
						this.$router.push('/member')
					}
				}else{
					this.activeName = tab.name;
					if(this.activeName==="first"){
						//应该是跳转到首页
						this.$router.push('/index')
					}
					if(this.activeName==="third"){
						//应该是跳转到发起项目协议页面
						this.$router.push('/start')
					}
					if(this.activeName==="fourth"){
						//应该是跳转到个人中心页面
						this.$router.push('/member')
					}
				}
			}
		},
		mounted() {
			this.selectAllCategory();
			this.selectItemByNSZ();
		}
	}
</script>

<style scoped>
	.time {
		font-size: 13px;
		color: #999;
	}

	.bottom {
		margin-top: 13px;
		line-height: 12px;
	}

	.button {
		padding: 0;
		float: right;
	}

	.image {
		width: 100%;
		display: block;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}
</style>
